<template>
  <my-container v-loading="pageLoading">
    <!--查询-->
    <template #header>
      <el-form class="ad-form-query" :inline="true" @submit.native.prevent>
        <el-form-item>
          <el-button type="primary" @click="onAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </template>

    <!--列表-->
    <el-table v-loading="listLoading" :data="dataList" highlight-current-row height="'100%'"
      style="width: 100%;height:100%;">
      <el-table-column prop="id" label="菜单编码" width />
      <el-table-column prop="name" label="名称" width />
      <el-table-column prop="createTime" label="创建时间" :formatter="formatCreatedTime" width />
      <el-table-column prop="enabled" label="状态" width="200">
        <template #default="{row}">
          <el-tag :type="row.enabled ? 'success' : 'danger'" disable-transitions>{{ row.enabled ? '正常' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序" width />
      <el-table-column prop="remark" label="说明" width />
      <el-table-column label="操作" width="180">
        <template #default="{ $index, row }">
          <el-button @click="onEdit($index, row)">编辑</el-button>
          <my-confirm-button type="delete" :validate="deleteValidate" :validate-data="row"
            @click="onDelete($index, row)" />
        </template>
      </el-table-column>
    </el-table>

    <!--新增窗口-->
    <my-window title="新增" embed width="95%" :visible.sync="addFormVisible" @close="closeAddForm">
      <el-form ref="addForm" :model="addForm" :rules="formRules" label-width="80px" :inline="false">
        <el-row>
          <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
            <el-form-item label="菜单编码" prop="id">
              <el-input v-model="addForm.id" auto-complete="off" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
            <el-form-item label="名称" prop="name">
              <el-input v-model="addForm.name" auto-complete="off" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
            <el-form-item label="状态" prop="enabled">
              <el-switch v-model="addForm.enabled" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
            <el-form-item label="排序" prop="sort">
              <el-input v-model.number="addForm.sort" auto-complete="off" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="说明" prop="remark">
              <el-input v-model="addForm.remark" type="textarea" :rows="2" auto-complete="off" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click.native="addFormVisible = false">取消</el-button>
        <my-confirm-button type="submit" :validate="addFormValidate" :loading="addLoading" @click="onAddSubmit" />
      </template>
    </my-window>

    <!--编辑窗口-->
    <my-window title="编辑" embed width="95%" :visible.sync="editFormVisible" @close="closeEditForm">
      <el-form ref="editForm" :model="editForm" :rules="formRules" label-width="80px" :inline="false">
        <el-row>
          <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
            <el-form-item label="菜单编码" prop="id">
              <el-input v-model="editForm.id" disabled auto-complete="off" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
            <el-form-item label="名称" prop="name">
              <el-input v-model="editForm.name" auto-complete="off" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
            <el-form-item label="状态" prop="enabled">
              <el-switch v-model="editForm.enabled" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
            <el-form-item label="排序" prop="sort">
              <el-input v-model.number="editForm.sort" auto-complete="off" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="说明" prop="remark">
              <el-input v-model="editForm.remark" type="textarea" :rows="2" auto-complete="off" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click.native="editFormVisible = false">取消</el-button>
        <my-confirm-button type="submit" :validate="editFormValidate" :loading="editLoading" @click="onEditSubmit" />
      </template>
    </my-window>
  </my-container>
</template>

<script>
  import {
    formatTime,
    formatJson,
  } from '@/utils'
  import {
    getList,
    // get,
    // add,
    // edit,
    // delete,
  } from '@/api/module'
  import MyContainer from '@/components/my-container'
  import MyConfirmButton from '@/components/my-confirm-button'
  import MyWindow from '@/components/my-window'
  import MySearch from '@/components/my-search'
  import MyImportWindow from '@/components/my-import-window'

  export default {
    name: 'Module',
    _sync: {
      disabled: false,
      title: '菜单管理',
      desc: '',
      cache: true
    },
    components: {
      MyContainer,
      MyConfirmButton,
      MyWindow,
      MySearch,
      MyImportWindow,
    },
    data() {
      return {
        // 查询字段
        fields: [{
            value: 'Code',
            label: '编码',
            operator: 'Contain',
            default: true
          },
          {
            value: 'Name',
            label: '名称',
            operator: 'Contain'
          }
        ],
        dynamicFilter: null,

        dataList: [],
        total: 0,
        sels: [], // 列表选中列
        statusList: [{
            name: '正常',
            value: true
          },
          {
            name: '禁用',
            value: false
          }
        ],
        listLoading: false,

        pageLoading: false,
        addDialogFormVisible: false,
        editFormVisible: false, // 编辑界面是否显示
        editLoading: false,
        formRules: {
          id: [{
            required: true,
            message: '请输入编码',
          }],
          name: [{
            required: true,
            message: '请输入名称',
          }]
        },
        // 编辑界面数据
        editForm: {
          id: '',
          name: '',
          remark: '',
          enabled: ''
        },
        editFormRef: null,

        addFormVisible: false, // 新增界面是否显示
        addLoading: false,
        // 新增界面数据
        addForm: {
          id: '',
          name: '',
          remark: '',
          enabled: true,
          sort: 1
        },
        addFormRef: null,
        deleteLoading: false,

        currentRow: null,

        importWindowVisible: false,
        templateFileUrl: process.env.VUE_APP_AUTHORITY + "/upload/document/templates/车间数据导入模板.xls",
      }
    },
    computed: {},
    mounted() {
      this.getDataList()
    },
    methods: {
      formatCreatedTime: function(row, column, time) {
        return formatTime(time, 'YYYY-MM-DD HH:mm')
      },
      onSearch(dynamicFilter) {
        this.$refs.pager.setPage(1)
        this.dynamicFilter = dynamicFilter
        this.getDataList()
      },
      // 获取岗位列表
      async getDataList() {
        const params = {}
        this.listLoading = true

        const res = await getList(params)
        this.listLoading = false

        this.dataList = res
      },
      // 显示编辑界面
      async onEdit(index, row) {
        // this.pageLoading = true
        // const res = await get({
        //   id: row.id
        // })
        // this.pageLoading = false
        // if (res && res.success) {
        //   const data = res.data
        //   this.editForm = data
        //   this.editFormVisible = true
        // }
      },
      closeEditForm() {
        this.$refs.editForm.resetFields()
      },
      // 显示新增界面
      onAdd() {
        this.addFormVisible = true
      },
      closeAddForm() {
        this.$refs.addForm.resetFields()
      },
      // 编辑验证
      editFormValidate: function() {
        let isValid = false
        this.$refs.editForm.validate(valid => {
          isValid = valid
        })
        return isValid
      },
      // 编辑
      async onEditSubmit() {
        // this.editLoading = true
        // const para = _.cloneDeep(this.editForm)

        // const res = await update(para)
        // this.editLoading = false

        // if (!res?.success) {
        //   return
        // }

        // this.$message({
        //   message: res.msg,
        //   type: 'success'
        // })

        // this.$refs['editForm'].resetFields()
        // this.editFormVisible = false
        // this.getWorkshops()
      },
      // 新增验证
      addFormValidate: function() {
        let isValid = false
        this.$refs.addForm.validate(valid => {
          isValid = valid
        })
        return isValid
      },
      // 新增
      async onAddSubmit() {
        // this.addLoading = true
        // const para = _.cloneDeep(this.addForm)

        // const res = await add(para)
        // this.addLoading = false

        // if (!res?.success) {
        //   return
        // }

        // this.$message({
        //   message: res.msg,
        //   type: 'success'
        // })

        // this.$refs['addForm'].resetFields()
        // this.addFormVisible = false
        // this.getWorkshops()
      },
      // 删除验证
      deleteValidate(row) {
        const isValid = true

        return isValid
      },
      // 删除
      async onDelete(index, row) {
        // row._loading = true
        // const para = {
        //   id: row.id
        // }
        // const res = await softDelete(para)
        // row._loading = false

        // if (!res?.success) {
        //   return
        // }

        // this.$message({
        //   message: res.msg,
        //   type: 'success'
        // })

        // this.getWorkshops()
      },
    }
  }
</script>
